<template>
  <div v-loading="loading" element-loading-text="大模型自动标引中" class="app-container" style=" min-height:550px ">
    <div class="filter-container" style="display: flex">
      <div style="width: 100%; height: 50px">
        <div style="
            display: flex;
            justify-content: space-between;
            margin-top: 0px;
            margin-bottom: -10px;
            align-items: flex-end;
          ">
          <div v-if="audit_status == 0" style="display: flex; align-items: center; margin-left: 5px">
            <i style="font-size: 22px; color: red" class="el-icon-warning-outline" />
            <span style="color: red; margin-left: 5px">待审核</span>
            <div style="color: #ccc; font-size: 12px; margin-left: 15px">
              以下内容为推荐值，可更换推荐值或手动输入。全部完成后请点击右上角提交审核。
            </div>
          </div>
          <div v-if="audit_status == 1" style="display: flex; align-items: center; margin-left: 5px">
            <i style="font-size: 22px; color: green" class="el-icon-circle-check" />
            <span style="color: green; margin-left: 5px">已审核</span>
          </div>
          <div style="float: right">
            <el-button type="primary" @click="submit(1)">
              审核并下一篇
            </el-button>
            <el-button @click="submit(2)">
              保存并返回
            </el-button>

            <el-button @click="textxiaozhun()">
              视觉大模型配置
            </el-button>
          </div>
        </div>
        <div style="width: 100%">
          <el-divider style="width: 100%" />
        </div>
      </div>
      <div style="display: flex; width: 100%">
        <div style="width: 60%; padding-right: 1px">
          <el-form ref="dataForm" :model="form" label-width="80px" :rules="rules" style="
              width: 100%;
              margin-top: 20px;
              padding-right: 10%;
              position: relative;
            ">
            <div style="display: flex">
              <el-form-item label="档号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.dh.value" size="mini" style="width: 100%" @input="handleInputChange('dh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('dh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="主题词" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.ztc.value" size="mini" style="width: 100%"
                    @input="handleInputChange('ztc')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('ztc')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="密级" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.mj.value" size="mini" style="width: 100%" @input="handleInputChange('mj')" />

                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('mj')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="保管期限" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.bgqx.value" size="mini" style="width: 100%"
                    @input="handleInputChange('bgqx')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('bgqx')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="全宗号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.qzh.value" size="mini" style="width: 100%" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('qzh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="类别号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.lbh.value" size="mini" style="width: 100%"
                    @input="handleInputChange('lbh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('lbh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <!-- <el-form-item label="分类号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.flh.value" size="mini" style="width: 100%" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('flh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item> -->
            </div>

            <div style="display: flex">
              <el-form-item label="案卷号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.ajh.value" size="mini" style="width: 100%"
                    @input="handleInputChange('ajh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('ajh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="件号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.jh.value" size="mini" style="width: 100%" @input="handleInputChange('jh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('jh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>
            </div>
            <!-- <div style="display: flex">
              <el-form-item label="附注" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.fz.value" size="mini" style="width: 100%" @input="handleInputChange('fz')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('fz')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="类别号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.lbh.value" size="mini" style="width: 100%"
                    @input="handleInputChange('lbh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('lbh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>
            </div> -->

            <div style="display: flex">
              <el-form-item label="文种" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.wz.value" size="mini" style="width: 100%" @input="handleInputChange('wz')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('wz')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="时间" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.sj.value" size="mini" style="width: 100%" @input="handleInputChange('sj')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('sj')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>
            </div>

            <div style="display: flex">
              <el-form-item label="题名" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.tm.value" size="mini" style="width: 100%" @input="handleInputChange('tm')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('tm')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="文件编号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.wjbh.value" size="mini" style="width: 100%"
                    @input="handleInputChange('wjbh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('wjbh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>
            </div>

            <div style="display: flex">
              <el-form-item label="责任者" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.zrz.value" size="mini" style="width: 100%"
                    @input="handleInputChange('zrz')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('zrz')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="缩微号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.swh.value" size="mini" style="width: 100%"
                    @input="handleInputChange('swh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('swh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="档案馆代号" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.dagdh.value" size="mini" style="width: 100%"
                    @input="handleInputChange('dagdh')" />
                  <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
                    @click="biaoyinskip('dagdh')">
                    更换
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="数据类型" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.sjlx.value" size="mini" style="width: 100%"
                    @input="handleInputChange('sjlx')" />
                </el-col>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="载体类型" style="width: 50%">
                <el-col :span="24" style="display: flex" @input="handleInputChange('ztlx')">
                  <el-input v-model="form.ztlx.value" size="mini" style="width: 100%" />
                </el-col>
              </el-form-item>

              <el-form-item label="载体数量" style="width: 50%">
                <el-col :span="24" style="display: flex" @input="handleInputChange('ztsl')">
                  <el-input v-model="form.ztsl.value" size="mini" style="width: 100%" />
                </el-col>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="载体单位" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.ztdw.value" size="mini" style="width: 100%"
                    @input="handleInputChange('ztdw')" />
                </el-col>
              </el-form-item>

              <el-form-item label="载体规格" style="width: 50%">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input v-model="form.ztgg.value" size="mini" style="width: 100%"
                    @input="handleInputChange('ztgg')" />
                </el-col>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <div style="padding-left: 2px; width: 40%">
          <div style="
              display: flex;
              justify-content: center;
              flex-direction: column;
            ">
            <el-tabs v-model="activeName" size="mini">
              <el-tab-pane label="PDF" name="PDF" />

              <el-tab-pane label="自动标引txt" name="自动标引txt" />
              <el-tab-pane label="按自然段换行txt" name="按自然段换行txt" />
              <el-tab-pane label="全文标识" name="全文标识" />
            </el-tabs>

            <div style="padding: 10px 5px">
              <div v-if="activeName == '自动标引txt'" style="
                  width: 100%;
                  height: auto;
                  overflow: scroll;
                  white-space: pre-wrap;
                  font-size: 12px;
                " v-html="form.content" />
              <div v-if="activeName == 'PDF'">
                <embed :src="form.pdf_url" type="application/pdf" width="100%" height="800px">
              </div>

              <div v-if="activeName == '按自然段换行txt'" style="
                  width: 100%;
                  height: auto;
                  overflow: scroll;
                  white-space: pre-wrap;
                  font-size: 12px;
                " v-html="form.contentzrdhh" />

              <div v-if="activeName == '全文标识'" style="
                  width: 100%;
                  height: auto;
                  overflow: scroll;
                  white-space: pre-wrap;
                  font-size: 12px;
                ">
                <div>
                  <div v-if="audit_status == 1">
                    {{ codeText }}
                  </div>
                  <div v-if="audit_status == 0" style="margin-top: 10px">
                    <span>此文章还未审核。</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="更换的内容" :visible.sync="dialogVisible" width="40%">
      <div>
        <div>
          <div v-for="(item, index) in list" :key="index" style="margin-top: 10px; display: flex">
            <span>
              {{ item.text }}
            </span>
            <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 4px 4px; height: 22px"
              @click="xuanzhe(item)">
              选择
            </el-button>
          </div>
        </div>
        <div style="margin-top: 20px">
          <el-link :href="linkValue" target="_blank" class="always-underlined" type="primary">
            新增标引规则
          </el-link>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="文本校准" :visible.sync="dialogVisiblewbjz" width="60%">
      <div style="display: flex;">
        <div style=" width: 48%; height:auto;  white-space: pre-wrap;font-size: 12px; padding: 5px 20px 5px 20px; ">
          <div style="margin-bottom: 10px;">
            校对前
          </div>
          <div v-html="form.textOs" />
        </div>

        <div style="width:48%; height:auto;  white-space: pre-wrap;font-size: 12px; padding: 5px 20px 5px 20px; ">
          <div style="margin-bottom: 10px;">
            校对后:<span>{{ form.summary }}</span>
          </div>
          <el-input v-model="form.text" v-loading="jiaozhunstatus" style="font-size: 12px;" type="textarea"
            placeholder="请输入内容" :autosize="{ minRows: 20, maxRows: 80}" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="jiaozhunbuttombaocun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { artApi } from "@/api/art";

import vkbeautify from "vkbeautify";

export default {
  components: {},
  data() {
    return {
      loading: false,
      jiaozhunstatus: false,
      data: null,
      audit_status: "",
      codeText: "",
      key: "",
      link: "",
      list: [],
      dh: "",
      ztc: "",
      mj: "",
      bgqx: "",
      qzh: "",
      flh: "",
      gjc: "",
      lbh: "",
      wz: "",
      ajh: "",
      jh: "",
      sj: "1",
      tm: "",
      wjbh: "",
      ztlx: "",
      ztsl: "",
      ztdw: "",
      ztgg: "",
      zrz: "",
      swh: "",
      zy: "",
      dagdh: "",
      sjlx: "",
      fz: "",
      dialogVisible: false,
      dialogVisiblewbjz: false,
      activeName: "PDF",
      saveStatus: false,
      batch_code: "",
      htmlContent: "",
      title: "",
      content: "",

      isDisabled: false,

      form: {
        id: "",
        dh: { value: "", guizeId: "" },
        ztc: { value: "", guizeId: "" },
        mj: { value: "", guizeId: "" },
        bgqx: { value: "", guizeId: "" },
        qzh: { value: "", guizeId: "" },
        flh: { value: "", guizeId: "" },
        gjc: { value: "", guizeId: "" },
        lbh: { value: "", guizeId: "" },
        wz: { value: "", guizeId: "" },
        jh: { value: "", guizeId: "" },
        ajh: { value: "", guizeId: "" },
        sj: { value: "", guizeId: "" },
        tm: { value: "", guizeId: "" },
        wjbh: { value: "", guizeId: "" },
        ztlx: { value: "纸张", guizeId: "" },
        ztsl: { value: "", guizeId: "" },
        ztdw: { value: "张", guizeId: "" },
        ztgg: { value: "A4", guizeId: "" },
        zrz: { value: "", guizeId: "" },
        swh: { value: "", guizeId: "" },
        zy: { value: "", guizeId: "" },
        dagdh: { value: "", guizeId: "" },
        sjlx: { value: "GCDA", guizeId: "" },
        fz: { value: "", guizeId: "" },
        article_id: "",
        content: "",
        contentzrdhh: "",
        text: "",
        textOs: "",
        summary: "",
      },
      rules: {
        template_name: [
          { required: true, message: "请输入模板名字", trigger: "blur" },
        ],
        priority: [
          { required: true, message: "请输入优先级", trigger: "blur" },
        ],
      },
    };
  },

  computed: {
    // 这是一个计算属性的 getter
    linkValue() {
      return (
        "/indexingSystem/save?article_id=" + this.form.id + "&key=" + this.key
      );
    },
  },
  async mounted() {
    this.form.id = this.$route.query.id;

    if (this.form.id != null) {
      await this.getDetail();

      if (this.audit_status == 0) {
        //获取档号

        // if (!this.form.dh.value) {
        //   this.getText("dh");
        // }

        if (!this.form.ztc.value) {
          //获取主题词
          this.getText("ztc");
        }

        if (!this.form.mj.value) {
          //获取密级
          this.getText("mj");
        }


        // //获取保管期限
        // this.getText("bgqx");
        //获取全宗号
        // this.getText("qzh");
        //获取分类号
        // this.getText("flh");
        //获取全文标识

        if (!this.form.gjc.value) {
          //关键词
          this.getText("gjc");
        }
        if (!this.form.wz.value) {
          //获取文种
          this.getText("wz");
        }

        if (!this.form.sj.value) {
          //获取时间
          this.getText("sj");
        }

        //获取提名
        if (!this.form.tm.value) {

          this.getText("tm");
        }
        //获取文件编号
        if (!this.form.wjbh.value) {

          this.getText("wjbh");
        }
        //责任者
        if (!this.form.zrz.value) {
          this.getText("zrz");
        }
        //获取缩微号
        if (!this.form.swh.value) {
          this.getText("swh");
        }
        //档案馆代号
        if (!this.form.dagdh.value) {
          this.getText("dagdh");
        }
        //获取附注
        if (!this.form.fz.value) {
          this.getText("fz");
        }



      }

    }
  },
  methods: {
    textxiaozhun() {
      window.open(
        "/indexingSystem/visualconfig"
      );
      // if (!this.form.xdStatus) {
      //   this.$message.error("当前大模型最大输出长度2000 token，不支持超长文本进行文本校对。");
      //   return;
      // }

      // this.dialogVisiblewbjz = true
      // this.jiaozhunbuttom()
    },

    async jiaozhunbuttombaocun() {

      const url = "jiaozhunbuttomBaocun";
      var res = await artApi(url, { id: this.form.id, "content": this.form.text });
      if (res.code == 200) {
        this.$message.success("保存成功！");
        window.location.href = "/dashboard/save?id=" + this.form.id;
      }
    },

    async jiaozhunbuttom() {
      this.jiaozhunstatus = true;
      const url = "xiaozhun";
      var res = await artApi(url, { id: this.form.id });
      if (res.code == 200) {
        this.$message.success("校对成功");
        this.form.text = res.data.correction_results;
        this.form.summary = res.data.summary;
        this.jiaozhunstatus = false;
      }
    },

    handleInputChange(type) {
      let data = this.form[type].value;

      this.form[type].guizeId = "";

      for (var i = 0; i < this[type].length; i++) {
        if (this[type][i].value == data) {
          this.form[type].guizeId = this[type][i].guizheId;

          return true;
        }
      }

      console.log(this.form[type]);
    },

    xuanzhe(objct) {

      console.log(objct.key);
      this.form[objct.key]["value"] = objct.value;
      this.form[objct.key]["guizeId"] = objct.guizheId;

      this.dialogVisible = false;
    },
    async getText(field) {
      const url = "getTextByField";
      var res = await artApi(url, { id: this.form.id, name: field });
      if (res.code == 200) {
        let data = res.data;
        if (data.length > 0) {
          this.form[field]["value"] = data[0].value;
          this.form[field]["guizeId"] = data[0].guizheId;
          this[field] = data;
        }
      }
    },

    biaoyinskip(key) {
      this.list = this[key];
      this.dialogVisible = true;
      this.key = key;
      // this.$router.push('/indexingSystem/save?key=' + key + '&article_id=' + this.form.id)
    },

    async autobiaoyin() {
      const url = "autobiaoyin";
      var res = await artApi(url, { id: this.form.id });
      if (res.code == 200) {
        console.log(1)
      }
    },

    async getDetail() {
      this.loading = true;
      const url = "getArticleByidabutBiaoyinAuto";
      var res = await artApi(url, { id: this.form.id });
      if (res.code == 200) {

        this.form.dh.value = res.data.dh;
        this.form.ztc.value = res.data.ztc;
        this.form.mj.value = res.data.mj;
        this.form.bgqx.value = res.data.bgqx;
        this.form.flh.value = res.data.flh;
        this.form.ajh.value = res.data.ajh;
        this.form.qzh.value = res.data.qzh;
        this.form.jh.value = res.data.jh;
        this.form.gjc.value = res.data.gjc;
        this.form.lbh.value = res.data.lbh;
        this.form.wz.value = res.data.wz;
        this.form.sj.value = res.data.sj;
        this.form.tm.value = res.data.tm;
        this.form.wjbh.value = res.data.wjbh;
        this.form.ztlx.value = res.data.ztlx;
        this.form.ztsl.value = res.data.ztsl;
        this.form.ztdw.value = res.data.ztdw;
        this.form.ztgg.value = res.data.ztgg;
        this.form.zrz.value = res.data.zrz;
        this.form.swh.value = res.data.swh;



        this.form.id = res.data.id;
        this.form.pdf_url = res.data.pdf_url;
        this.form.doubpdf_url = res.data.doubpdf_url;



        this.form.content = res.data.content;
        this.form.text = res.data.text;
        this.form.textOs = res.data.text;
        this.form.xdStatus = res.data.xdStatus;

        this.form.ztsl.value = res.data.ztsl;
        this.form.contentzrdhh = res.data.contentzrdhh;
        this.audit_status = res.data.audit_status;
        this.codeText = vkbeautify.xml(res.data.xml);
        this.data = res.data;
      }
      this.loading = false;
    },

    submit(type) {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          // this.isDisabled = true
          let params = this.form;
          const url = "uptDocument";
          var res = await artApi(url, this.form);
          if (res.code == 200) {
            this.$message.success("操作成功！");

            if (type == 1) {
              window.location.href = "/dashboard/save?id=" + res.data;
            }
            if (type == 2) {
              this.$router.push("/dashboard/index");
            }
          } else {
            this.$message.error(res.msg);
          }
          this.isDisabled = false;
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 0 0;
}

::v-deep .el-form-item {
  margin-bottom: 12px;
}

::v-deep .el-button--mini {
  /* padding : 0px  0px  0px  0px; */
  height: 28px;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.huo {
  clear: both;
  margin-top: 15px;
  margin-bottom: 10px;
}

.flex {
  /* display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px; */
}
.row {
  /* display: flex;
  flex-direction: column; */
}

.filter-container {
  position: relative;
  align-items: baseline;
}

.filter-container::after {
  content: "";
  position: absolute;
  top: 90px; /* 上边距，可以根据需要调整 */
  bottom: 90px; /* 下边距，可以根据需要调整 */
  left: 58%; /* 调整为左边div的宽度百分比加上它的padding */
  width: 1px; /* 分隔线宽度 */
  /* background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 49%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 100%
  ); */
  background-color: #dcdfe6;
  background-size: 2px 4px; /* 控制虚线的宽度和间隔 */
}
.always-underlined {
  text-decoration: underline;
}
</style>
